<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/new-style.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
		<script src="../js/fanhui.js"></script>
	</head>
	<body>
		<div id="app">
			<!--头-->
			<header>
				<div style="background-color:red;">
					<van-search placeholder="请输入搜索关键词" show-action shape="round" background="red" error="ture" style="height: 60px;"
					 @focus="jujiao" @blur="shijiao">
						<div slot="action" style="padding-top: 10px;background-color:red ;">
							<van-icon name="chat-o" size="40px" color="	#FFFAFA"></van-icon>
						</div>
					</van-search>
				</div>
			</header>
			<section>
				<div>
					<div id="lunbo" style="width: 100%;">
						<van-swipe :autoplay="2000" indicator-color="white">
							<van-swipe-item v-for="(item, index) in lunbo">
								<img :src="item.ImageUrl" width="100%" />
							</van-swipe-item>
						</van-swipe>
					</div>
				</div>
				<div style="height: 184px;margin-top: -4px;background-color:#FFF0F5;">
					<div style="background-color:white;border-radius: 20px 20px 20px 20px;height: 112px;">
						<van-rwo>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #BA55D3;">酒</button><br />
									<span style="color: #A9A9A9; ;">酒水饮料</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color:#FF1493;">厨</button><br />
									<span style="color:	#A9A9A9;">厨房用品</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #BA55D3;">酒</button><br />
									<span style="color:	#A9A9A9;">厨房用品</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #FF1493;">厨</button><br />
									<span style="color:#A9A9A9;">酒水饮料</span>
								</div>
							</van-col>
							</van-row>
					</div>
					<div style="background-color:white;border-radius: 20px 20px 20px 20px;width: 95%;margin: auto;height: 50px;margin-top: 10px;">
						<div style="line-height: 50px;">
							<van-row>
								<van-col span="3"><span style="color: red;"><strong>咨讯:</strong></span></van-col>
								<van-col span="17">
									<van-swipe :autoplay="3000" :show-indicators='false' height="30px">
										<van-swipe-item v-for="texts in wenzigundong">{{texts.Title}}</van-swipe-item>
									</van-swipe>
								</van-col>
								<van-col span="4"><button style="border:none;background-color:white ;height: 50px;">更多</button></van-col>
								</van-rwo>
						</div>

					</div>
				</div>
				<div style="background-color:#FFF0F5;">
					<div style="background-color: white;padding-left: 5px;">
						<div style="border-left:4px solid red;font-size: 18px;height: 30px;line-height: 30px;">热门推荐</div>
						<div style="width: 145px;margin-top: 5px;" @click="cc(tu.src)">
							<img v-lazy="tu.src" width="100%" />
							<span>世界印记狮子2016<br />原装进口的法国红酒</span>
							<br />
							<div style="color: red;margin-top: 10px;">￥0.01</div>
						</div>
					</div>
					<div style="border-left:4px solid green;font-size: 18px;height: 30px;line-height: 30px;margin: 5px;background-color: white;">商品列表</div>
					<div>
						<div style="margin-bottom: 10px;" v-for="(item,index) in feilei" @click="cc(index)">
							<van-card :title="item.Name">
								<div slot="thumb">
									<img v-lazy="item.GoodsImageUrl.src" />
								</div>
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥{{item.RealPrice}}<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥{{item.MarketPrice}}</span></div>
									<div style="margin-top: 20px;">
										累计销售{{item.VirtualSaleCount}}
										<div style="float: right;">{{item.BrowseCount}}次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
					</div>
					<div style="text-align: center;height: 40px;line-height: 40px;color: #969799;">-------暂无更多数据---------</div>
				</div>
			</section>
			<!--尾-->

		</div>
		<script>
			Vue.use(VueLazyload, {
				error: '../img/2-1G1111P9244E.jpg'
			});
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					lunbo: [

					],
					wenzigundong: [],
					tu: [],
					isShow: true,
					feilei: []


				},
				created() {
					ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							"success": function(res) {
								console.log(res)
								vm.lunbo = res.Data.CarouselFigureList
								vm.wenzigundong = res.Data.InformationList
								vm.tu = res.Data.GoodsRecommendList[0].GoodsImageUrl
								console.log(vm.lunbo)
								console.log(vm.wenzigundong)
								console.log(vm.tu)
							}
						}),
						this.fenlei();
					
				},
				methods: {
					jujiao: function() {
						this.isShow = !this.isShow
					},
					shijiao: function() {
						this.isShow = !this.isShow
					},
					gr: function() {
						plus.webview.create("sgin.html", "gr")
						plus.webview.show(gr)
					},
					fenlei: function() {
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							"success": function(res) {
								console.log(res);
								vm.feilei = res.Data;

							}
						})
					},
					cc: function(res) {
						var v = plus.webview.create("productDetails.html", "productDetails", {
							zindex: 1
						}, {
							shuju: res
						})
						plus.webview.show("productDetails", "zoom-out", 500);
					},
				}
			})
		</script>
	</body>
</html>
